<template>
    <view class="page">
        <scroll-view
            scroll-y
            style="background-image: url('https://www.qianxiaokj.cn/uploads/images/20250523/202505231749353e2679322.png')"
            class="container"
        >
            <view class="user">
                <view class="header">
                    <!-- #ifndef  H5 -->
                    <u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent">
                        <u-navbar
                            :is-back="false"
                            title="个人中心"
                            :title-bold="true"
                            :is-fixed="false"
                            :border-bottom="false"
                            :background="{ background: 'rgba(256,256, 256,' + navBg + ')' }"
                            :title-color="navBg > 0.5 ? '#000' : '#fff'"
                        ></u-navbar>
                    </u-sticky>
                    <!-- #endif -->
                    <view class="user-info row-between">
                        <view class="info row">
                            <view v-if="isLogin">
                                <image
                                    class="avatar mr20 flexnone"
                                    :src="
                                        userInfo.avatar
                                            ? userInfo.avatar
                                            : '/static/images/user/default_avatar.png'
                                    "
                                ></image>
                            </view>
                            <view v-else>
                                <image
                                    class="avatar mr20 flexnone"
                                    src="/static/images/user/default_avatar.png"
                                />
                            </view>
                            <view class="white mr20" v-if="isLogin">
                                <view class="name xxl line1">{{ userInfo.nickname }}</view>
                                <view class="tel"> {{ userInfo.mobile }}</view>
                            </view>
                            <view class="white" v-else @tap="goLogin">
                                <view style="font-size: 42rpx; color: #ffffff">点击登录</view>
                            </view>
                        </view>
                        <view class="row" style="align-self: flex-start">
                            <view class="user-opt" @tap="goPage('/pages/user_set/user_set')">
                                <image
                                    style="width: 58rpx; height: 58rpx"
                                    src="/static/images/icon_edit.png"
                                ></image>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="order-nav bg-white">
                    <view class="title row-between" @tap="goPage('/pages/order_list/order_list')">
                        <view class="lg" style="font-size: 28rpx; font-weight: bold">我的订单</view>
                        <view class="muted sm row">
                            全部
                            <image
                                class="icon-sm ml10"
                                src="/static/images/arrow_right.png"
                            ></image>
                        </view>
                    </view>
                    <view class="nav row">
                        <view
                            class="item column-center mb20"
                            @tap="goPage('/pages/order_list/order_list?type=0')"
                        >
                            <view class="icon-contain">
                                <view
                                    v-if="userInfo.wait_pay_count"
                                    class="badge xs row-center bg-white"
                                >
                                    {{ userInfo.wait_pay_count }}
                                </view>
                                <image
                                    class="nav-icon"
                                    src="/static/images/icon_my_daizhifu.png"
                                ></image>
                            </view>
                            <view class="sm mt10">待支付</view>
                        </view>
                        <view
                            class="item column-center mb20"
                            @tap="goPage('/pages/order_list/order_list?type=2')"
                        >
                            <view class="icon-contain">
                                <view
                                    v-if="userInfo.wait_driver_count"
                                    class="badge xs row-center bg-white"
                                >
                                    {{ userInfo.wait_driver_count }}
                                </view>
                                <image
                                    class="nav-icon"
                                    src="/static/images/icon_my_yijiedan.png"
                                ></image>
                            </view>
                            <view class="sm mt10">已接单</view>
                        </view>
                        <view
                            class="item column-center mb20"
                            @tap="goPage('/pages/order_list/order_list?type=3')"
                        >
                            <view class="icon-contain">
                                <view
                                    v-if="userInfo.wait_traveling_count"
                                    class="badge xs row-center bg-white"
                                >
                                    {{ userInfo.wait_traveling_count }}
                                </view>
                                <image
                                    class="nav-icon"
                                    src="/static/images/icon_my_daiwancheng.png"
                                ></image>
                            </view>
                            <view class="sm mt10">行程中</view>
                        </view>
                        <view
                            class="item column-center mb20"
                            @tap="goPage('/pages/order_list/order_list?type=4')"
                        >
                            <view class="icon-contain">
                                <view
                                    v-if="userInfo.wait_comment_count"
                                    class="badge xs row-center bg-white"
                                >
                                    {{ userInfo.wait_comment_count }}
                                </view>
                                <image
                                    class="nav-icon"
                                    src="/static/images/icon_my_pingjia.png"
                                ></image>
                            </view>
                            <view class="sm mt10">待评价</view>
                        </view>
                    </view>
                    <view class="nav row">
                        <view
                            class="item column-center mb20"
                            @tap="goPage('/pages/order_list/order_list?type=5')"
                        >
                            <view class="icon-contain">
                                <view
                                    v-if="userInfo.wait_complete_count"
                                    class="badge xs row-center bg-white"
                                >
                                    {{ userInfo.wait_complete_count }}
                                </view>
                                <image
                                    class="nav-icon"
                                    src="/static/images/icon_my_wancheng.png"
                                ></image>
                            </view>
                            <view class="sm mt10">已完成</view>
                        </view>
                        <view
                            class="item column-center mb20"
                            @tap="goPage('/pages/order_list/order_list?type=-1')"
                        >
                            <view class="icon-contain">
                                <view
                                    v-if="userInfo.wait_after_sale_count"
                                    class="badge xs row-center bg-white"
                                >
                                    {{ userInfo.wait_after_sale_count }}
                                </view>
                                <image
                                    class="nav-icon"
                                    src="/static/images/icon_my_tui.png"
                                ></image>
                            </view>
                            <view class="sm mt10">退款/售后</view>
                        </view>
                    </view>
                </view>
                <view class="driver">
                    <view class="flex justify-betwee">
                        <view>
                            <image class="avatar mr20 flexnone" src="/static/images/driver.png" />
                        </view>
                        <view class="column">
                            <view class="name xxl bold">成为司机</view>
                            <view class="xxs muted">多劳多得</view>
                        </view>
                    </view>

                    <view class="flex">
                        <button class="button">司机端</button>
                    </view>
                </view>
                <view class="my-assets mt-5">
                    <view class="my-item ml20 mr20 bt-line">
                        <view class="nav row-between">
                            <view class="">
                                <image
                                    class="icon-md ml20 mr-1"
                                    src="/static/images/fly.png"
                                ></image>
                                发布包车旅游线路
                            </view>
                            <view class="mr20" @tap="goPage('/pages/publish/route')">
                                <image class="icon-sm" src="/static/images/arrow_right.png"></image>
                            </view>
                        </view>
                    </view>

                    <view class="mt-px my-item ml20 mr20">
                        <view class="nav row-between">
                            <view class="">
                                <image
                                    class="icon-md ml20 mr-1"
                                    src="/static/images/publish.png"
                                ></image>
                                我的线路
                            </view>
                            <view class="mr20" @tap="goPage('/pages/travel/travel_line')">
                                <image class="icon-sm" src="/static/images/arrow_right.png"></image>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="my-assets mt-5">
                    <view class="my-item ml20 mr20 bt-line">
                        <view class="nav row-between">
                            <view class="">
                                <image
                                    class="icon-md ml20 mr-1"
                                    src="/static/images/travel.png"
                                ></image>
                                旅行社信息
                            </view>
                            <view class="mr20" @tap="goPage('/pages/user_set/user_set')">
                                <image class="icon-sm" src="/static/images/arrow_right.png"></image>
                            </view>
                        </view>
                    </view>

                    <view class="mt-px my-item ml20 mr20">
                        <view class="nav row-between">
                            <view class="">
                                <image
                                    class="icon-md ml20 mr-1"
                                    src="/static/images/money.png"
                                ></image>
                                查看佣金
                            </view>
                            <view class="mr20" @tap="goPage('/pages/user_set/user_set')">
                                <image class="icon-sm" src="/static/images/arrow_right.png"></image>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="my-assets mt-5">
                    <view class="my-item ml20 mr20 bt-line">
                        <view class="nav row-between">
                            <view class="">
                                <image
                                    class="icon-md ml20 mr-1"
                                    src="/static/images/icon_tel.png"
                                ></image>
                                平台电话
                            </view>
                            <view class="mr20">{{ mobile }}</view>
                        </view>
                    </view>
                    <view class="my-item mt-px ml20 mr20">
                        <view class="nav row-between">
                            <view>
                                <image
                                    class="icon-md ml20 mr-1"
                                    src="/static/images/icon_setting.png"
                                ></image>
                                设置
                            </view>
                            <view class="mr20" @tap="goPage('/pages/user_set/user_set')">
                                <image class="icon-sm" src="/static/images/arrow_right.png"></image>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>
        <tabbar />
    </view>
</template>

<script setup lang="ts">
import { getDecorate } from '@/api/shop'
import { useUserStore } from '@/stores/user'
import { onShow } from '@dcloudio/uni-app'
import { storeToRefs } from 'pinia'
import { reactive, ref } from 'vue'

const userStore = useUserStore()
const { userInfo, isLogin } = storeToRefs(userStore)
const state = reactive<{
    meta: any[]
    pages: any[]
}>({
    meta: [],
    pages: []
})

const mobile = ref('')
const getData = async () => {
    const data = await getDecorate({ id: 2 })
    let kefu_data = await getDecorate({ id: 3 })

    state.meta = JSON.parse(data.meta)
    state.pages = JSON.parse(data.data)
    kefu_data = JSON.parse(kefu_data.data)

    mobile.value = kefu_data[0].content.mobile
    uni.setNavigationBarTitle({
        title: state.meta[0].content.title
    })
    console.log(userInfo)
}

onShow(() => {
    userStore.getUser()
})
const goLogin = () => {
    uni.navigateTo({
        url: '/pages/login/login'
    })
}
const goPage = (url: string) => {
    console.log(url)
    uni.navigateTo({
        url: url
    })
}
getData()
</script>

<style lang="scss" scoped>
body {
    background-color: #f8f8f8;
}

page {
    height: 100%;
}

.page {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.container {
    background-repeat: no-repeat;
    background-size: 100%;
    flex: 1;
}

.user {
    margin-bottom: 50rpx;

    .header {
        display: flex;
        flex-direction: column;
        height: 420rpx;

        .user-info {
            padding: 0rpx 30rpx;
            //#ifdef  H5
            padding-top: 90rpx;
            //#endif
            .avatar {
                height: 140rpx;
                width: 140rpx;
                border-radius: 50%;
                overflow: hidden;
            }

            .name {
                text-align: left;
                margin-bottom: 5rpx;
                max-width: 400rpx;
            }

            .user-id {
                border: 1px solid white;
                border-radius: 100rpx;

                .copy-btn {
                    background-color: #ffdfda;
                    height: 40rpx;
                    width: 90rpx;
                    border-radius: 100rpx;
                }
            }

            .user-opt {
                position: relative;

                .dot {
                    position: absolute;
                    background-color: #ee0a24;
                    border: 2rpx solid #ffffff;
                    border-radius: 100%;
                    top: 6rpx;
                    right: 0rpx;
                    font-size: 22rpx;
                    min-width: 16rpx;
                    height: 16rpx;
                }
            }

            .buyer-type {
                background-color: #ffa200;
                height: 38rpx;
                padding: 0 10rpx;
            }
        }

        .member {
            flex: 1;
            padding: 0 20rpx;

            .member-entery {
                color: #ffe0a1;
                padding: 0 16rpx;
                width: 100%;
                height: 80rpx;
                background: url(../../static/images/bg_member_grade.png);
                background-size: 100%;
            }
        }
    }

    .order-nav {
        .icon-contain {
            position: relative;
        }
    }

    .order-nav {
        margin: -120rpx 20rpx 0;
        border-radius: 16rpx;
    }

    .my-assets {
        margin: 20rpx;
        border-radius: 16rpx;
        background-color: #ffffff;
    }

    .server-nav {
        margin: 20rpx;
        border-radius: 8rpx;
    }

    .title {
        height: 88rpx;
        padding: 0 30rpx;
    }

    .nav {
        padding: 26rpx 0 0;

        .assets-item {
            flex: 1;
            border-radius: 8rpx;
        }

        .item {
            width: 25%;
            height: 120rpx;
        }

        .badge {
            padding: 0 6rpx;
            min-width: 28rpx;
            height: 28rpx;
            border-radius: 28rpx;
            box-sizing: border-box;
            border: 1rpx solid;
            position: absolute;
            left: 33rpx;
            top: -10rpx;
            z-index: 2;
        }

        .nav-icon {
            width: 52rpx;
            height: 52rpx;
        }

        .item_card {
            height: 120rpx;
        }
    }

    .my-item {
        height: 100rpx;
    }
}

.driver {
    margin: 20rpx;
    background: #ffffff;
    border-radius: 16rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx;

    .avatar {
        width: 110rpx;
        height: 110rpx;
    }
}

.column {
    line-height: 1.8;
}

.button {
    width: 200rpx;
    background-color: #fef8ef;
    color: #f6a22d;
}

.bt-line {
    border-bottom: 1rpx solid #f8f8f8;
}
</style>
